<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

    <link rel="stylesheet" type="text/css" href="/lib/iview/iview.css">
    <link rel="stylesheet" type="text/css" href="/css/global.css">

    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/zepto.min.js"></script>
    <script type="text/javascript" src="/lib/iview/iview.min.js"></script>
    <script type="text/javascript" src="/js/vue-components.js"></script>
    <script type="text/javascript" src="/js/public.js"></script>

    <title>百度地图选取工具</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:90%}
        #but_control{height:10%}

    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=2v5EsIZLnz6ua5W5UDmjlgkG">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
</head>

<body>
<div id="app">
<div id="but_control" class="g-dg-search-banner" >
    <i-form ref="myAddForm" :model="searchForm" label-position="right" :label-width="120" >

            <i-select v-model="searchForm.LayerId"  style="width: 120px;" >
                <template v-for="ly in mapCfgLayer">
                    <i-option :value="ly.id">{{ly.name}}</i-option>
                </template>
            </i-select>


            <i-button type="info" >添加区域</i-button>
            <i-button type="info" >保存区域</i-button>


    </i-form>
</div>

<div id="container" style="border:1px solid gray"></div>
</div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(110.946928,21.663135);
    // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    map.setCurrentCity("茂名");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // 创建点坐标
    //map.setCurrentCity("茂名");
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
</script>


<script type="text/javascript">
    const m_apis = {
        layer_save() {
            return PB.apiRoute('/api/map/mapcfgarea/findPage?queryChangeModel=1&id=', 'GET');
        },
        layer_listAll() {
            return PB.apiRoute('/api/map/mapcfglayer/findPage?pageNo=1&pageSize=10000', 'GET');
        },
        layer_listAll2() {
            return PB.apiRoute('/api/map/mapCfgLayer/listAll?queryChangeModel=1&id=', 'GET');
        },
        layer_listAll3() {
            return PB.apiRoute('/api/map/mapCfgLayer/listAll?queryChangeModel=1&id=', 'GET');
        },
    };

    let vm = new Vue({
        el: '#but_control',
        data() {
            return {
                apis: m_apis,
                title: '工单列表',
                page: 1,
                pageSize: 10,
                searchForm: {
                    plevel: 0,
                    statetype: 'XD_ALL',
                    orderby: 'crtTime desc',
                    queryChangeModel: 1,
                    LayerId:0
                },
                mapCfgLayer:[],
                searchDate: ['', ''],
                ruleValidate: {
                    /*cmMobile: [
                     {required: true, message: '请输入客户号码查询', trigger: 'blur'}
                     ]*/
                },
                total: 0,
                dtData: [],
                dtCols: []
            }
        },
        created(){
            this.loadData();
            this.loadLayer();
        },
        computed: {
            getTableHeight(){
                //return (window.innerHeight - 150);
            }
        },
        methods: {
            loadData () {

            },
            loadLayer(){
                let that = this;
                PB.ajax(this.apis.layer_listAll(), function (d) {
                    that.mapCfgLayer = d.data;
                });
            }
        }
    })
</script>
</body>
</html>